import useLocale from '@/hooks/useLocale'
import locale from './locale'
import styles from './style/shortcuts.module.less'
import { Card, Divider, Link, Typography } from '@arco-design/web-react'
import { IconFile, IconFire, IconMobile, IconSettings, IconStorage } from '@arco-design/web-react/icon'

const Shortcuts = () => {
  const t = useLocale(locale)
  const shortcuts = [
    {
      title: t['workplace.contentMgmt'],
      key: 'Content Management',
      icon: <IconFile />
    },
    {
      title: t['workplace.contentStatistic'],
      key: 'Content Statistic',
      icon: <IconStorage />
    },
    {
      title: t['workplace.advancedMgmt'],
      key: 'Advanced Management',
      icon: <IconSettings />
    },
    {
      title: t['workplace.onlinePromotion'],
      key: 'Online Promotion',
      icon: <IconMobile />
    },
    {
      title: t['workplace.marketing'],
      key: 'Marketing',
      icon: <IconFire />
    }
  ]
  const recentShortcuts = [
    {
      title: t['workplace.contentStatistic'],
      key: 'Content Statistic',
      icon: <IconStorage />
    },
    {
      title: t['workplace.contentMgmt'],
      key: 'Content Management',
      icon: <IconFile />
    },
    {
      title: t['workplace.advancedMgmt'],
      key: 'Advanced Management',
      icon: <IconSettings />
    }
  ]
  const onClickShortcut = (key: string) => {
    console.log('%c [ key ]-54', 'font-size:13px; background:#98ba0c; color:#dcfe50;', key)
  }
  return (
    <Card>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Typography.Title heading={6}>{t['workplace.shortcuts']}</Typography.Title>
        <Link>{t['workplace.seeMore']}</Link>
      </div>
      <div className={styles.shortcuts}>
        {shortcuts.map((shortcut) => (
          <div className={styles.item} key={shortcut.key} onClick={() => onClickShortcut(shortcut.key)}>
            <div className={styles.icon}>{shortcut.icon}</div>
            <div className={styles.title}>{shortcut.title}</div>
          </div>
        ))}
      </div>
      <Divider />
      <div className={styles.recent}>{t['workplace.recent']}</div>
      <div className={styles.shortcuts}>
        {recentShortcuts.map((shortcut) => (
          <div className={styles.item} key={shortcut.key} onClick={() => onClickShortcut(shortcut.key)}>
            <div className={styles.icon}>{shortcut.icon}</div>
            <div className={styles.title}>{shortcut.title}</div>
          </div>
        ))}
      </div>
    </Card>
  )
}

export default Shortcuts
